import { Suspense } from "react";
import { Skeleton } from "@/components/ui/skeleton";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import SwpDocumentPage from "./swp-document-page";

export const metadata = {
  title: "SWP 문서 관리",
  description: "SWP 시스템 문서 조회 및 동기화",
};

// ============================================================================
// 로딩 스켈레톤
// ============================================================================

function SwpDocumentSkeleton() {
  return (
    <Card>
      <CardHeader>
        <div className="flex items-center justify-between">
          <Skeleton className="h-8 w-32" />
          <Skeleton className="h-10 w-40" />
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        <Skeleton className="h-32 w-full" />
        <Skeleton className="h-96 w-full" />
      </CardContent>
    </Card>
  );
}

export default async function SwpDocumentUploadPage({
  searchParams,
}: {
  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) {
  const params = await searchParams;
  
  return (
    <div className="container mx-auto py-6 space-y-6">
      {/* 헤더 */}
      <Card>
        <CardHeader>
          <CardTitle className="text-2xl">SWP 문서 관리</CardTitle>
          <CardDescription>
            외부 시스템(SWP)에서 문서 및 첨부파일을 조회하고 동기화합니다.
            문서 → 리비전 → 파일 계층 구조로 확인할 수 있습니다.
          </CardDescription>
        </CardHeader>
      </Card>

      {/* 메인 컨텐츠 */}
      <Suspense fallback={<SwpDocumentSkeleton />}>
        <SwpDocumentPage searchParams={params} />
      </Suspense>
    </div>
  );
}